Scenario-Driven Design Systems

Yesenia Perez-Cruz—An Event Apart video 16/01/22 https://www.youtube.com/watch?v=u1mi0VJOuZ8

Design systems are made up of three main parts:

• Elements
• Interconnections
• Purpose

You can't just focus on the first one (Elements). That doesn't make a successful design system. You just end up with a bunch of elements and patterns, but they don't work together (interconnections), and they don't solve a problem (purpose).

Many other takes on where to start:

• Start your design system with user scenarios.
• Start with language
• Start with content and people

Focusing on scenarios is a great way of making sure you're focusing on the purpose, and by relation, the interconnections to achieve that purpose.

As part of this, don't have hypothetical scenarios. You can't anticipate needs of users that don't exist yet Once again, you're solving a problem now.

Brad Frost's UI inventory groups by type - buttons, links, forms, etc. Alla Kholmatova's Purpose-Directed Inventory groups by purpose - discovery, learning, etc. The former usually shows functional areas, and the latter can highlight brand expression and style better.

The latter is a tool better for finding patterns joined by a shared purpose. It helps find the differences between presentational differences vs semantic differences. Do they look the same and solve different problems, or the opposite?

This helps you consolidate patterns:

• Identify core workflows and the patterns needed to support them
• Understand the role each pattern plays in a user's journey
• Define how the patterns work together to creative cohesion

You can also write documentation in a way that focuses on scenarios. Designers are often thinking in scenarios, so tailoring documentation for that helps drive adoption in a self-service way.

Scenarios also tie into variations. Create variations for needs. Don't create variations if they're achieving the same purpose, and don't tie into brand expression.

This is part of what makes design systems so hard - the interconnections and purpose mean that any component addition, update, etc. is tied to similar components in the area (interconnections), and the goal this component is trying to solve for the user (purpose).

In the process of naming an element, you work out the function as a group and reach an agreement.

• Alla Kholmatova

Name components collaboratively (i.e cross-discipline). It helps create clear shared language across disciplines.

[[20230116121916-design-system-purpose]]

[[designsystem]] [[designsystembranding]]